<template>
	<view class="page">
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
		<view class="mypage_theme_bg">
			<view class="interval" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
			<view class="user_ww_info">
				<image
					@click="onPageJump('/pages/my/editInfo')"
					:src="userInfo.headImg || 'http://qn.kemean.cn/upload/202007/08/default_head_img.png'"
					mode="aspectFill"
				></image>
				<view class="user_ww_basicinfo" @click="onPageJump('/pages/my/editInfo')">
					<text>{{ userInfo.nickName || '未登录' }}</text>
					<view v-if="userInfo.phone">{{ userInfo.phone }}</view>
				</view>
				<image class="user_ww_set" @click="onPageJump('/pages/my/editInfo')" src="../../static/icon/shortVideo/icon_to_white.png" mode="aspectFit"></image>
			</view>
			<view class="user_ww_order">
				<view class="user_order_text">
					<view>我的订单</view>
					<text @click="onPageJump('/pages/my/order/orderList')">查看全部订单 ></text>
				</view>
				<view class="user_order_content">
					<view @click="onPageJump('/pages/my/order/orderList?type=1001')">
						<image src="../../static/icon/theme/ic_order_payment.png" mode="aspectFit"></image>
						<text>待付款</text>
					</view>
					<view @click="onPageJump('/pages/my/order/orderList?type=1201')">
						<image src="../../static/icon/theme/ic_order_delivery.png" mode="aspectFit"></image>
						<text>待发货</text>
					</view>
					<view @click="onPageJump('/pages/my/order/orderList?type=1301')">
						<image src="../../static/icon/theme/ic_order_finished.png" mode="aspectFit"></image>
						<text>待收货</text>
					</view>
					<view @click="onPageJump('/pages/my/order/orderList?type=1401')">
						<image src="../../static/icon/theme/ic_order_rate.png" mode="aspectFit"></image>
						<text>评价</text>
					</view>
					<view @click="onPageJump('/pages/my/order/orderList?type=1500')">
						<image src="../../static/icon/theme/ic_dynamic_service.png" mode="aspectFit"></image>
						<text>售后</text>
					</view>
				</view>
			</view>
		</view>
		<view class="menu_list_box">
			<view class="menu_list" @click="onPageJump('/pages/my/address/addressList')">
				<view class="left_info">
					<image src="../../static/icon/theme/ic_my_address.png" mode="aspectFit"></image>
					<text>收货地址</text>
				</view>
				<view class="arrow"></view>
			</view>
			<!-- <view class="menu_list" @click="onPageJump('/pages/my/coupon')">
				<view class="left_info">
					<image src="../../static/icon/theme/ic_my_coupon.png" mode="aspectFit"></image>
					<text>优惠券</text>
				</view>
				<view class="arrow"></view>
			</view> -->
			<view class="menu_list" @click="onPageJump('/pages/my/collect')">
				<view class="left_info">
					<image src="../../static/icon/theme/ic_my_collect.png" mode="aspectFit"></image>
					<text>我的收藏</text>
				</view>
				<view class="arrow"></view>
			</view>
			<view class="menu_list" @click="onPageJump('/pagesMy/my/distribution/extendCenter')">
				<view class="left_info">
					<image src="../../static/icon/theme/ic_my_promotion.png" mode="aspectFit"></image>
					<text>推广中心</text>
				</view>
				<view class="arrow"></view>
			</view>

			<!-- <view class="menu_list" @click="onPageJump('/pages/my/feedback')">
				<view class="left_info">
					<image src="../../static/icon/theme/ic_my_feedback.png" mode="aspectFit"></image>
					<text>意见反馈</text>
				</view>
				<view class="arrow"></view>
			</view>
			<view class="menu_list" @click="onPageJump('/pagesMy/my/about')">
				<view class="left_info">
					<image src="../../static/icon/theme/ic_my_about.png" mode="aspectFit"></image>
					<text>关于我们</text>
				</view>
				<view class="arrow"></view>
			</view> -->
		</view>
		<!-- <text>我的服务</text> -->
		<view class="menu_list_box">
			<view class="menu_list" @click="onPageJump('/pages/my/myConsult')">
				<view class="left_info">
					<image src="../../static/icon/theme/ic_my_collect_mp.png" mode="aspectFit"></image>
					<text>开通一样的小程序</text>
				</view>
				<view class="arrow"></view>
			</view>
		</view>
		<!-- <view class="tab_box">
			<view :class="{ active: tabState == 1000 }" @click="tabState = 1000">商家</view>
			<view :class="{ active: tabState == 2000 }" @click="tabState = 2000">作品 57</view>
			<view :class="{ active: tabState == 3000 }" @click="tabState = 3000">动态 4</view>
		</view>
		<view v-if="tabState == 1000" class="merchant_info_box">
			<view class="input_form_box">
				<view class="input_box">
					<scroll-view scroll-x="true" class="imgs_scroll">
						<view class="imgs"><image v-for="(item, index) of 5" :key="index" src="" mode="aspectFill"></image></view>
					</scroll-view>
					<view class="prompt">商家介绍内容</view>
				</view>
			</view>
			<view class="input_form_box borderTop">
				<view class="input_box">
					<view class="name">商家名称</view>
					<view class="input_info">coffee体验店</view>
				</view>
				<view class="input_box line">
					<view class="name">商家品类</view>
					<view class="input_info">咖啡/奶茶果汁</view>
				</view>
			</view>
		</view>
		<view v-if="tabState == 3000" class="dynamic_list_box"><dynamic-item v-for="(item, index) of 6" :key="index" black @share="shareShow = true"></dynamic-item></view>
		<view v-if="tabState == 2000" class="video_list_box">
			<view class="video_list" v-for="(item, index) of 6" :key="index">
				<image src="../../static/icon/theme/ic_upload_nationalemblem.png" mode="aspectFill"></image>
				<view class="pageviews">3.9w</view>
			</view>
		</view> -->
		<!-- <attention-public v-model="showPopup" :showBtn="false"></attention-public> -->
		<navigation-video></navigation-video>
		<z-share v-model="shareShow"></z-share>
	</view>
</template>

<script>
import attentionPublic from '@/components/module/attention_public';

import { mapState, mapMutations } from 'vuex';
// #ifdef APP-PLUS
import { appShare } from '@/config/utils';
// #endif
import navigationVideo from '@/components/module/navigation_video.vue';
import dynamicItem from '@/components/module/dynamic_item.vue';
import zShare from "@/components/module/share.vue"
export default {
	components: {
		navigationVideo,
		attentionPublic,
		dynamicItem,
		zShare
	},
	data() {
		return {
			statusBarHeight: 0,
			showPopup: false,
			shareInfo: {},
			balanceInfo: {},
			tabState: 1000,
			shareShow: false
		};
	},
	computed: {
		...mapState(['userInfo'])
	},
	//第一次加载
	onLoad(e) {
		// 隐藏原生的tabbar
		uni.hideTabBar();
		//获取手机状态栏高度
		this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		this.getConfInfo();
	},
	//页面显示
	onShow() {
		this.judgeLogin(() => {
			this.pageData();
		});
	},
	//方法
	methods: {
		...mapMutations(['setUserInfo']),
		onPageJump(url) {
			this.judgeLogin(() => {
				uni.navigateTo({
					url: url
				});
			});
		},
		onShare() {
			// #ifdef APP-PLUS
			appShare(this.shareInfo);
			// #endif
		},
		getConfInfo() {
			this.$http
				.get('api/open/v1/conf', {
					needLogin: false
				})
				.then(res => {
					this.shareInfo = res.share;
				});
		},
		pageData() {
			this.$http.get('api/mime/v1/info').then(res => {
				this.setUserInfo(res);
			});
			this.$http.get('api/mime/wallet/v1/info').then(res => {
				this.balanceInfo = res;
			});
		}
	},
	//页面隐藏
	onHide() {},
	//页面卸载
	onUnload() {},
	//页面下来刷新
	onPullDownRefresh() {},
	//页面上拉触底
	onReachBottom() {},
	//用户点击分享
	onShareAppMessage(e) {
		return this.wxShare();
	}
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';

.page {
	background: #201b21;
	min-height: 100vh;
}
.mypage_theme_bg {
	background-image: url(http://qn.kemean.cn/upload/202006/08/1591609182855e23rza3x.png);
	background-position: center bottom;
	background-size: 100% auto;
	background-repeat: no-repeat;
	.user_ww_info {
		padding: 60upx 40upx 35upx 40upx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		> image {
			width: 120upx;
			height: 120upx;
			border-radius: 50%;
		}

		.user_ww_basicinfo {
			width: calc(100% - 160upx);
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			padding: 15upx 30upx;
			flex: 1;

			> text {
				font-size: 32upx;
				color: #ffff;
				margin-bottom: 20upx;
			}

			> view {
				// margin-right: 270upx;
				padding: 9upx 20upx;
				font-size: 24upx;

				color: #fff;
				background-color: rgba(0, 0, 0, 0.2);
				border-radius: 21upx;
			}
		}

		.user_ww_set {
			width: 15rpx;
			height: 24rpx;
			flex-shrink: 0;
		}
	}
}

.user_ww_order {
	background-color: #2b262c;
	margin: 0upx 30upx 24upx 30upx;
	padding-bottom: 30upx;
	display: flex;
	flex-direction: column;
	border-radius: 8upx;
	overflow: hidden;
	box-shadow: 0px 4px 20px 0px rgba(150, 150, 150, 0.1);

	.user_order_text {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30upx;

		> view {
			font-size: 32upx;
			color: #fff;
			font-weight: bold;
		}

		> text {
			font-size: 24upx;
			color: #fff;
		}
	}

	.user_order_content {
		display: flex;
		justify-content: space-around;
		align-items: center;

		> view {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 24upx;
			color: #fff;
			> image {
				width: 40upx;
				height: 40upx;
				margin-bottom: 20upx;
			}
		}
	}
}
.menu_list_box {
	background-color: #2b262c;
	margin: 0upx 30upx 24upx 30upx;
	.menu_list {
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.left_info {
			display: flex;
			align-items: center;
			image {
				width: 40rpx;
				height: 40rpx;
			}
			text {
				font-size: 28rpx;
				color: #ffffff;
				margin-left: 24rpx;
			}
		}
		.arrow {
			width: 11rpx;
			height: 20rpx;
			@include bis("../../static/icon/shortVideo/icon_to_white.png");
		}
	}
}
.tab_box {
	display: flex;
	view {
		flex: 1;
		padding: 30rpx 0;
		text-align: center;
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.3);
		border-bottom: 4rpx solid transparent;
		&.active {
			color: #ffffff;
			font-weight: bold;
			border-bottom: 4rpx solid $themeColor;
		}
	}
}
.video_list_box {
	display: flex;
	flex-wrap: wrap;
	.video_list {
		width: 248rpx;
		height: 330rpx;
		position: relative;
		margin-right: 2rpx;
		margin-bottom: 2rpx;
		&:nth-child(3n) {
			margin-right: 0;
		}
		image {
			width: 100%;
			height: 100%;
		}
		.pageviews {
			position: absolute;
			height: 88rpx;
			bottom: 0;
			left: 0;
			width: 100%;
			background-image: linear-gradient(to, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
			padding: 0 12rpx;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #ffffff;
			&::before {
				content: '';
				margin-right: 9rpx;
				width: 32rpx;
				height: 20rpx;
				@include bis('../../static/icon/shortVideo/ic_watch.png');
			}
		}
	}
}
.borderTop {
	border-top: 20rpx solid #2b262c;
}
.input_form_box {
	padding: 0 30rpx;
	.input_box {
		padding: 0;
		background-color: transparent;
		&.line {
			border-top: 2rpx solid #2b262c;
		}
		.name {
			color: #fff;
			opacity: 0.6;
		}
	}
	.imgs_scroll {
		width: 100%;
		padding-top: 30rpx;
		.imgs {
			display: flex;
			image {
				width: 162rpx;
				height: 162rpx;
				margin-right: 12rpx;
				background-color: #b67301;
				flex-shrink: 0;
			}
		}
	}
	.prompt {
		font-size: 24rpx;
		color: #fff;
		margin-top: 30rpx;
		opacity: 0.6;
	}
	.input_info {
		flex: 1;
		color: #fff;
		font-size: 24rpx;
		opacity: 0.6;
		display: flex;
		justify-content: flex-end;
	}
}
</style>
